<template>
  <div class="main">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
</template>
<style lang="less" scoped>
.main {
  width: 500px;
  height: 500px;
  background-color: antiquewhite;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.main .box1 {
  width: 100px;
  height: 100px;
  background-color: yellow;
  transition: opacity 0.3s;
  opacity: 1;
  z-index: 2;
  position: absolute;
  top: 200px;
  left: 200px;
}
.main .box2 {
  width: 200px;
  height: 200px;
  background-color: green;
  top: 0px;
  z-index: 1;
  opacity: 0;
  float: left;
  transition: all 2s;
  transform: scale(0.5);
}
.main .box1:hover {
  opacity: 0;
}
.main .box1:hover + .box2 {
  opacity: 1;
  z-index: 3;
  transform: scale(1);
}
.main .box2:hover {
  opacity: 1;
  z-index: 3;
  transform: scale(1);
}
</style>
